<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Path</title>
</head>
<body>
  <canvas id="mycanvas" width="600" height="600"></canvas>
  <script src="/js/sprite-core.js"></script>
  <script>
    const Path = spritejs.Path;
    const Sprite = spritejs.Sprite;
    const Layer = spritejs.Layer;
    const context = document.getElementById('mycanvas').getContext('2d');
    const layer = new Layer({context});

    const img = new Image();
    img.src = 'https://p0.ssl.qhimg.com/t01a72262146b87165f.png';
    img.onload = function () {
      const s = new Sprite();
      s.attr({
        size: [10, 10],
        bgcolor: 'blue',
        anchor: 0.5,
        pos: [300, 300],
        zIndex: 1000,
      });
      layer.appendChild(s);

      const s2 = new Sprite();
      s2.attr({
        textures: [{
          image: img,
          srcRect: [0, 0, 196, 128],
          rect: [0, 0, 50, 50],
        }],
        size: [50, 50],
        bgcolor: 'red',
        pos: [200, 200],
        padding: 50,
      });
      layer.appendChild(s2);

      window.s2 = s2;

      // s2.transition(2.0).attr({
      //   x: x => x + 50,
      // });
    };
  </script>
</body>
</html>